<!--
 * @Author: yuqy
 * @Date: 2021-06-30 10:32:19
 * @LastEditors: yuqy
 * @LastEditTime: 2023-10-21 16:07:20
 * @Descripttion: -
-->
/* eslint-disable */
<!--预约列表-->
<style lang="less" scoped>
@import url("./less/join.less");
</style>
<template>
  <div>
    <Modal
      v-model="show"
      @on-cancel="closeModel"
      @on-ok="ok"
      :loading="loading"
      :mask-closable="false"
      :width="width"
      footer-hide
    >
      <div>
        <h2>加入课堂</h2>
        <Form :model="formItem" :label-width="20">
          <FormItem label style="margin-bottom: 0;">
            <div class="num_wrap choose_join_type">
              <!-- <van-radio-group v-model="joinType" direction="horizontal">
                  <van-radio name="1" checked-color="#fe6400">互动</van-radio>
                  <van-radio name="2" checked-color="#fe6400">直播</van-radio>
              </van-radio-group>-->
              <RadioGroup v-model="joinType">
                <Radio label="1">互动</Radio>
                <Radio label="2">直播</Radio>
              </RadioGroup>
            </div>
          </FormItem>
          <FormItem label>
            <div class="class_code">
              <div class="class_inner">
                课堂编码:
                <Input
                  size="large"
                  maxlength="10"
                  @on-enter="ok"
                  style="width: 50%;"
                  id="inputNum"
                  v-model.trim="formItem.input"
                  placeholder
                />
              </div>
              <div class="btn_add" @click="ok" v-ripple>加入</div>
            </div>
            <Input v-model.trim="formItem.input1" style="display: none;"/>
          </FormItem>
          <FormItem label=" ">
            <div class="num_wrap">
              <div class="num_inner">
                <div>
                  <span
                    v-for="(num, index) in 5"
                    @click="chooseNum(index + 1)"
                    v-ripple
                    :key="index"
                  >{{ index + 1 }}</span>
                  <span @click="delNum" class="span_btn span_btn_del" v-ripple>
                    <Icon type="ios-backspace-outline"/>
                  </span>
                </div>
                <div>
                  <span @click="chooseNum(6)" v-ripple>6</span>
                  <span @click="chooseNum(7)" v-ripple>7</span>
                  <span @click="chooseNum(8)" v-ripple>8</span>
                  <span @click="chooseNum(9)" v-ripple>9</span>
                  <span @click="chooseNum(0)" v-ripple>0</span>
                  <span @click="ok" class="span_btn span_btn_sure" v-ripple>确认</span>
                </div>
              </div>
              <div class="btn_add">加入</div>
            </div>
          </FormItem>
        </Form>
      </div>
    </Modal>
  </div>
</template>
<script>
/* eslint-disable */
import {
  Form,
  Input,
  FormItem,
  Radio,
  Modal,
  Message,
  Icon,
  RadioGroup
} from "view-ui-plus";
import { mapState, mapActions } from "vuex";
import { getAction } from "@/api";
import { goHomeSpeaker, goListenSpeaker } from "@/libs/homeredirect";
import util from "@/libs/util";
// import $ from 'jquery'
export default {
  name: "JOIN",
  components: {
    Form,
    Input,
    FormItem,
    Radio,
    Modal,
    Icon,
    RadioGroup
  },
  setup() {
    return {};
  },
  data() {
    return {
      joinType: "1", // 互动 2  直播
      formItem: {
        input: ""
      },
      inputArr: [],
      loading: true,
      width: 300,
      show: true
    };
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo, // 企业人员信息
      roomInfo: state => state.roomAgora.roomInfo // 房间信息
    })
  },
  watch: {},
  props: {},
  mounted() {},
  created() {
    let width = window.innerWidth;
    // 针对浏览器进行兼容
    if (width >= 750) {
      this.width = 400;
    }
    if (width >= 900) {
      this.width = 450;
    }
    // if (width >= 1280) {
    //   this.width = 600
    // }
    // if (width >= 1920) {
    //   this.width = 700
    // }
  },
  methods: {
    ...mapActions("roomAgora", ["getRoomInfo", "getRoomLiveInfo"]),
    closeModel() {
      this.formItem.input = "";
      this.inputArr = [];
      this.$emit("close");
    },
    async ok() {
      this.loading = true;
      // this.$emit('close')
      if (!this.formItem.input || this.formItem.input.length !== 6) {
        this.loading = false;
        setTimeout(() => {
          this.loading = true;
        }, 100);
        return Message.warning({ content: "请输入6位有效课程码" });
      }
      if (isNaN(this.formItem.input)) {
        this.loading = false;
        setTimeout(() => {
          this.loading = true;
        }, 100);
        return Message.warning({ content: "输入课堂码错误" });
      }
      let params = {
        code: this.formItem.input,
        deviceId: "1",
        phone: this.userInfo.phone
      };
      // 观看直播
      if (this.joinType == 2) {
        return this.getLiveInfo(params);
      }
      // 实时获取最新的，房间详情
      let res = await this.getRoomInfo(this.formItem.input);
      if (res) {
        Message.success({ content: "加入成功" });
        this.loading = false;
        setTimeout(() => {
          this.closeModel();
        }, 500);
        // 需要对角色进行判断，如果是听众需要蹦到听众页面
        // 当前角色是，听众 蹦到听讲页面
        this.roomInfo.isSpeaker == 1
          ? goListenSpeaker(params.code)
          : goHomeSpeaker(params.code);
      }
    },
    /**
     * @name: 获取直播房间信息,校验是否包含有直播链接，如果没有开通直播 需要弹出提示
     * @msg:
     * @param {*} code
     * @return {*}
     */
    async getLiveInfo(params) {
      let res = await this.getRoomLiveInfo(params);
      if (!res) return;
      this.closeModel();
      // 当前角色是，听众 蹦到听讲页面
      this.roomInfo.isSpeaker == 1
        ? goListenSpeaker(params.code, 2)
        : goHomeSpeaker(params.code);
    },
    chooseNum(value) {
      if (this.formItem.input) {
        this.inputArr = this.formItem.input.split("");
      } else {
        this.inputArr = [];
      }
      let input = document.querySelectorAll("#inputNum input");
      if (input.length > 0) {
        let selectionStart = input[0].selectionStart;
        selectionStart = selectionStart < 0 ? 0 : selectionStart;
        this.inputArr.splice(selectionStart, 0, value);
        this.formItem.input = this.inputArr.join("");
        input[0].focus(); // 继续保持聚焦状态
        selectionStart++; // 光标需要移动一个位置
        setTimeout(() => {
          input[0].setSelectionRange(selectionStart, selectionStart);
        }, 10);
      }
    },
    delNum() {
      let selectionEnd = 0;
      let selectionStart = this.formItem.input.length - 1; // 默认当前光标在尾部
      let input = document.querySelectorAll("#inputNum input");
      if (input.length > 0) {
        selectionStart = input[0].selectionStart - 1;
        selectionEnd = input[0].selectionEnd - 1;
        input[0].focus(); // 继续保持聚焦状态
      }
      // 说明光标在首位，此时不需要删除
      if (selectionStart < 0 && selectionEnd < 0) return;
      if (this.formItem.input) {
        this.inputArr = this.formItem.input.split("");
        if (selectionStart != selectionEnd) {
          this.inputArr.splice(
            selectionStart + 1,
            selectionEnd - selectionStart
          );
          selectionStart++;
        } else {
          this.inputArr.splice(selectionStart, 1);
        }
        setTimeout(() => {
          if (selectionStart < 0) {
            selectionStart = 0;
          }
          input[0].setSelectionRange(selectionStart, selectionStart);
        }, 10);
        this.formItem.input = this.inputArr.join("");
      }
    }
  }
};
</script>
